<template>
  <layout>
  <div class="top">
    <el-input v-model='key'  placeholder="" ></el-input>
    <el-button type="" @click="$router.push('/cate/create')" v-if="$checkPermission(31)">新增分类</el-button>
  </div>
    <el-table
    :data="tableData"
    style="width: 100%"
    >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column
    prop="id"
      label="ID">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column label="操作" fixed="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
           @click="$router.push('/cate/edit/' + scope.row.id)">编辑</el-button>
        <el-button
          size="mini"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
  </layout>
</template>

<script>
export default {
  data() {
    return {
      tableData:[{

      },],
      key:"",
    }
  },
  created() {
    this.getData()
  },
  watch: {
    key(val){
      this.getData() 
    },
  },
  methods: {
    getData(){
      let path = '/cate/select'
      if(this.key){
        path = `/cate/select?key=${this.key}`
      }
      
      this.$http.get(path).then(res =>{
      if(res.errcode == 0){
        this.tableData = res.data
      }
    })
    },
    handleDelete(index,row){
      this.$http.post('cate/trash',{
        id : row.id
      }).then(res =>{
        this.tableData.splice(index,1)
      })
    },
  },
}
</script>

<style >
.top{
  display:flex;
  justify-content:space-between;
}
  .el-input{
    width:180px;
  }
</style>